<template>
    <div class="page">
        <nav-top style="position:sticky; top: 0; left: 0;right: 0;"></nav-top>
        <div class="ball1 bg"></div>
        <div class="ball2 bg"></div>
        <div class="ball3 bg"></div>
        <div class="ball4 bg"></div>
        <div class="ball5 bg"></div>
        <div class="ball6 bg"></div>
        <div class="ball7 bg"></div>
        <div class="bg1 bg"></div>
        <div class="bg2 bg"></div>
        <div class="bg3 bg"></div>
        <div class="bg4 bg"></div>
        <div class="bg5 bg"></div>
        <div class="bg6 bg"></div>
        <div class="main">
            <div class="banner" v-if="bannerList && bannerList.length > 0">
                <banner-dom height="8rem" :list="bannerList"></banner-dom>
            </div>

            <div class="btn-wrap">
                <div class="tabs">
                    <div class="tabs-content">
                        <div :data-font="$i18n.locale" class="tab mouse-active" :class="tabIndex == item.id ? 'active' : ''"
                            v-for="item in tabs" :key="item.id" @click="tabIndex = item.id">{{ item.name }}
                        </div>
                    </div>
                </div>
                <el-button :data-font="$i18n.locale" @click="addVideo">
                    {{ $t('pastReview.btn') }}
                    <el-image class="btn-icon" :src="require('@/assets/img/btn-right-arrow.png')">
                    </el-image>
                </el-button>
            </div>
            <ul class="list" v-show="tabIndex === 0">
                <li class="item mouse-active" v-for="item, index in 25" :key="index" title="往期回顾" alt=" 往期回顾" :style="{
                    'background-image': 'url(' + 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/posters-new/' + (index + 1) + '.jpg'
                }"
                    @click="choose('https://originstar.oss-cn-shanghai.aliyuncs.com/contest/posters-new/' + (index + 1) + '.jpg')">

                </li>
            </ul>
            <ul class="list" v-show="tabIndex === 1">
                <li class="item mouse-active" v-for="item, index in 20" :key="index" title="往期回顾" alt=" 往期回顾" :style="{
                    'background-image': 'url(' + 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/posters/' + (index + 1) + '.jpg'
                }"
                    @click="choose('https://originstar.oss-cn-shanghai.aliyuncs.com/contest/posters/' + (index + 1) + '.jpg')">

                </li>
            </ul>
        </div>
        <show-info :image="chooesImage" :show="show" @del="show = false"></show-info>
    </div>
</template>

<script>
import navTop from "@/components/common/nav-top"
import bannerDom from "@/components/banner/index.vue"
import showInfo from "@/components/pastReview"
import { banner } from "@/request/api"
export default {
    name: "pastReview",
    components: {
        navTop,
        bannerDom,
        showInfo
    },
    data() {
        return {
            show: false,
            chooesImage: "",
            bannerList: [],
            tabIndex: 0
        }
    },
    mounted() {
        this.banners()
    },
    computed: {
        tabs() {
            return [{
                name: this.$t('pastReview.tabs.tab1'),
                id: 0
            },
            {
                name: this.$t('pastReview.tabs.tab2'),
                id: 1
            }
            ]
        }
    },
    methods: {
        choose(v) {
            this.show = true
            this.chooesImage = v
        },

        banners() {
            banner({ type: '1' }).then(res => {
                this.bannerList = res.data.data
            })
        },
        addVideo() {
            let url = 'http://www.isynbio-talk.cn/#/series/main-series-info/25'
            window.open(url, "_blank")
        }
    }
}
</script>

<style lang="less" scoped>
.tabs {
    display: flex;
    align-items: center;
    position: relative;

    .tabs-content {
        display: flex;
        align-items: center;
        position: relative;

        .tab {
            margin-right: 1.28rem;
            font-size: 0.64rem;
            font-weight: 400;
            color: #C5C5CA;
            line-height: 1rem;
            position: relative;
            transition: all .5s;
        }

        .tab[data-font='zh'] {
            font-family: 'AlibabaPuHuiTi-Regular', 'AlibabaPuHuiTi';
        }

        .tab[data-font='en'] {
            font-family: 'RNSSanzSC-Normal, RNSSanzSC';
        }

        .tab:nth-last-of-type(1) {
            margin-right: 0;
        }

        .active::before {
            content: '';
            position: absolute;
            bottom: -0.18rem;
            width: 100%;
            height: 0.05rem;
            background: #7709CC;
        }

        .active {
            color: #7709CC;
            font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaPuHuiTi';
            font-weight: bold;
        }
    }

    .tabs-content::before {
        content: '';
        width: 100%;
        height: 0.03rem;
        background: #C5C5CA;
        position: absolute;
        bottom: -0.21rem;
        left: 0;
    }
}

.page {
    width: 51.2rem;
    min-height: 100vh;
    position: relative;

    .bg {
        pointer-events: none;
        z-index: -1;
    }

    .ball1 {
        width: 0.69rem;
        height: 0.69rem;
        background: url('@/assets/img/balls2_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 6.03rem;
        top: 9.04rem;
    }

    .ball2 {
        width: 0.45rem;
        height: 0.45rem;
        background: url('@/assets/img/balls1_3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 4.16rem;
        top: 14.93rem;
    }

    .ball3 {
        width: 1.39rem;
        height: 1.39rem;
        background: url('@/assets/img/balls1_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.91rem;
        top: 3.28rem;
    }

    .ball4 {
        width: 0.83rem;
        height: 0.83rem;
        background: url('@/assets/img/balls1_2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.13rem;
        top: 5.52rem;
    }

    .ball5 {
        width: 2.08rem;
        height: 2.11rem;
        background: url('@/assets/img/balls3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 3.07rem;
        bottom: 8rem;
    }

    .ball6 {
        width: 1.25rem;
        height: 1.28rem;
        background: url('@/assets/img/balls5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 5.68rem;
        bottom: 6.19rem;
    }

    .ball7 {
        width: 0.93rem;
        height: 0.96rem;
        background: url('@/assets/img/balls4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.13rem;
        bottom: 4.11rem;
    }

    .bg1 {
        width: 6.13rem;
        height: 5.23rem;
        background: url('@/assets/img/relatedInformation/bg1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .bg2 {
        width: 11.25rem;
        height: 7.97rem;
        background: url('@/assets/img/relatedInformation/bg2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bg3 {
        width: 10.35rem;
        height: 10.35rem;
        background: url('@/assets/img/relatedInformation/bg3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 14.8rem;
        bottom: 2.03rem;
    }

    .bg4 {
        width: 12.13rem;
        height: 6.24rem;
        background: url('@/assets/img/relatedInformation/bg4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.37rem;
        bottom: 0;

    }

    .bg5 {
        width: 3.95rem;
        height: 8.85rem;
        background: url('@/assets/img/pastReview/bg5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        right: 0;

    }

    .bg6 {
        width: 9.52rem;
        height: 6.56rem;
        background: url('@/assets/img/pastReview/bg6.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1.95rem;


    .banner {
        width: 51.2rem;
        height: 8rem;
    }

    .btn-wrap {
        margin-top: 1.6rem;
        display: flex;
        width: 32.02rem;
        justify-content: space-between;
        align-items: center;

        .el-button {
            padding: 0 1rem;
            height: 1.6rem;
            position: relative;
            outline: none;
            border: 0.08rem solid #7709CC;
            border-radius: 0.32rem;
            background: linear-gradient(315deg, rgba(250, 251, 255, 0.25) 100%, rgba(252, 248, 255, 0.25) 100%);
            transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            overflow: hidden;
        }

        .el-button :deep(span) {
            z-index: 8;
            color: #7709CC;
        }

        .el-button[data-font='zh'] :deep(span) {
            font-size: 0.56rem;
            font-weight: normal;
            font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
        }

        .el-button[data-font='en'] :deep(span) {
            font-size: 0.56rem;
            font-family: 'RNSSanzSC-Normal, RNSSanzSC';
            font-weight: 400;
        }

        .el-button:active {
            backdrop-filter: blur(30px);
            transform: scale(0.9);
            background-image: linear-gradient(to left, rgba(64, 102, 235, 0.75), rgba(179, 88, 222, 0.75));
            border: 0.08rem solid rgba(119, 9, 204, 0);

            :deep(span) {
                color: #FFFFFF;
            }
        }

        .btn-icon {
            width: 0.8rem;
            height: 0.8rem;
            margin-left: 0.32rem;
        }
    }

    .list {
        margin-top: 1.3rem;
        width: 32.02rem;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        .item {
            flex-grow: 0;
            flex-shrink: 0;
            width: 9.68rem;
            height: 5.36rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top;
            margin-right: 1.49rem;
            margin-bottom: 1.6rem;
            border: 2px solid rgba(255, 255, 255, 0.5);
            transition: all 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
        }

        .item:nth-of-type(3n) {
            margin-right: 0;
        }

        .item:hover {
            transform: scale(1.198, 1.199);
            border: 2px solid;
            border-image: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%) 1;
        }
    }
}
</style>